<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets" template="index.xhtml">
	<ui:define name="body">
		<script type="text/javascript">
			$(document).ready(function() {
				$(".submenu-active").removeClass('submenu-active');
				$("#utilisateur").addClass('submenu-active');
			});
		</script>
		<f:view>
		
			<h:form>
			
				<h1>Utilisateur</h1>
				<table width="100%" class="nostyle">
					<tr>
						<td>
							<h3>CrÃ©ation dâ€™un compte utilisateurs</h3> 
							<p:spacer width="300" height="5"></p:spacer>
						</td>
						<td><p:commandButton
								value="Revenir a la liste des utilisateurs"
								style="font-size: 0.9em" immediate="true"
								action="utilisateurList?faces-redirect=true" />
						</td>
					</tr>
				</table>
				<p:separator />
				<table class="nostyle">
					<tr>
						<td>
							<h3>Fiche</h3> <p:spacer width="300" height="5"></p:spacer>
						</td>
						<td>
							<h5>CivilitÃ©</h5>
						</td>
					</tr>
					<tr>
						<td></td>
						<td><p:selectOneMenu required="true" style="width:300px" value="#{utilisbeant.user.sexe}">
								<f:selectItem itemLabel="Monsieur" itemValue="Monsieur" />
								<f:selectItem itemLabel="Madame" itemValue="Madame" />
							</p:selectOneMenu>
						</td>
					</tr>
					<tr>
						<td></td>
						<td>
							<h5>PrÃ©nom</h5>
						</td>
					</tr>
					<tr>
						<td></td>
						<td><h:inputText size="50" class="input-text" value="#{utilisbeant.user.lastName}"
								style="width:300px" />
						</td>
					</tr>
					<tr>
						<td></td>
						<td><h5>Nom</h5>
						</td>
					</tr>
					<tr>
						<td></td>
						<td><h:inputText size="50" class="input-text" value="#{utilisbeant.user.firstName}"
								style="width:300px" />
						</td>
					</tr>
					<tr>
						<td></td>
						<td><h5>Matricule</h5>
						</td>
					</tr>
					<tr>
						<td></td>
						<td><h:inputText size="50" class="input-text" value="#{utilisbeant.user.number}" id="numberInputTextId"
								style="width:300px" >
								 
								<f:validateLongRange minimum="2" maximum="9999999"/>
								   <p:ajax update="msgErrorsNumber" event="keyup" />
								</h:inputText>
									<p:message for="numberInputTextId" id="msgErrorsNumber" display="icon"/>
									
						</td>
					</tr>
					<tr>
						<td></td>
						<td><h5>Email</h5>
						</td>
					</tr>
					<tr>
						<td></td>
						<td><h:inputText size="50" class="input-text" value="#{utilisbeant.user.email}" id="userEmailId"
								style="width:300px" >
								 <f:validateRegex pattern="[\w\.-]*[a-zA-Z0-9_]@[\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]" />
								   <p:ajax update="msgErrorsEmail" event="keyup" />
								</h:inputText>
								<p:message for="userEmailId" id="msgErrorsEmail" display="icon"/>
						</td>
					</tr>

					<tr>
						<td></td>
						<td><br></br> <br></br> 
						
						<h:outputLabel value="Cocher si pas d'email"></h:outputLabel>
						<h:selectBooleanCheckbox value="#{utilisbeant.user.mailSended}"></h:selectBooleanCheckbox>
					
						</td>
					</tr>
					<tr>
						<td></td>
						<td>
							<h5>Identifiant</h5>
						</td>
					</tr>
					<tr>
						<td></td>
						<td><h:inputText size="50" class="input-text" value="#{utilisbeant.user.identification}"
								style="width:300px" />
						</td>
					</tr>
					<tr>
						<td></td>
						<td>
							<h5>Mot de passe</h5>
						</td>
					</tr>
					<tr>
						<td></td>
						<td>
						
						<p:password  size="50"  value="#{utilisbeant.user.password}"
								style="width:300px"></p:password>
					
						</td>
					</tr>
				</table>
				<br></br>
				<p:separator />
				<table class="nostyle">
					<tr>
						<td><h3>RÃ´le</h3> <p:spacer width="300" height="5"></p:spacer>
						</td>
						<td>
							<h5>RÃ´le</h5>
						</td>
					</tr>
					<tr>
						<td></td>
						<td><p:selectOneMenu value="#{utilisbeant.user.role.nom}"
								
								 style="width:300px">
								<f:selectItems value="#{utilisbeant.availbleRoles}" />
							</p:selectOneMenu>
						</td>
					</tr>
					<tr>
						<td></td>
						<td>
							<h5>Magasin</h5>
						</td>
					</tr>
					<tr>
						<td></td>
						<td><p:selectOneMenu required="true" style="width:300px" value="#{utilisbeant.user.enseigne.nom}">
									<f:selectItems value="#{utilisbeant.availbleEnseigne}" />
							</p:selectOneMenu>
						</td>
					</tr>
					<tr>
						<td></td>
						<td>
							<h5>Rattachement hiÃ©rarchique</h5>
						</td>
					</tr>
					<tr>
						<td></td>
						<td><p:selectOneMenu required="true" style="width:300px" value="#{utilisbeant.user.superUser.firstName}">
								<f:selectItems value="#{utilisbeant.availbleUsers}" />
									<p:ajax event="change"
							listener="#{utilisbeant.onchangeSuperUser}"
							update="caseEmployeeDetailsId" />
							</p:selectOneMenu>
						</td>
					</tr>
						</table>
				
	
			
				
			
				<br></br>
				<br></br>
				<p:separator />
					<p:panel id="caseEmployeeDetailsId" 
			 widgetVar="caseEmployeeDetailsWv"  visible="#{utilisbeant.caseEmployeePanelDetailVisibility}">
				<table class="nostyle">
					<tr>
						<td></td>
						<td>
							<h5>Coefficient d'efficacitÃ©</h5>
						</td>
					</tr>
					<tr>
						<td></td>
						<td><h:inputText size="50" class="input-text"
								style="width:300px" />
						</td>
					</tr>
					<tr>
						<td>
							<h3>Contrat</h3> <p:spacer width="300" height="5"></p:spacer>
						</td>
						<td>
							<h5>Type de Contrat</h5>
						</td>
					</tr>
					
					<tr>
						<td></td>
						<td><p:selectOneMenu required="true" style="width:300px">
								<f:selectItem itemLabel="Contrat" itemValue="1" />
								<f:selectItem itemLabel="Contrat 2" itemValue="2" />
								<f:selectItem itemLabel="Contrat 3" itemValue="3" />
								<f:selectItem itemLabel="Contrat 4" itemValue="4" />
							</p:selectOneMenu>
						</td>
					</tr>
					<tr>
						<td></td>
						<td>
							<h5>Date de dÃ©but</h5>
						</td>
					</tr>
					<tr>
						<td></td>
						<td>
							<h5>
								<p:calendar mode="popup" pattern="dd/MM/yyyy" size="32" showOn="both" />
								<!-- style="width:300px"  size="50" showOn="both" popupIconOnly="true" -->
							</h5>
						</td>
					</tr>
					<tr>
						<td></td>
						<td><h5>Date de fin</h5>
						</td>
					</tr>
					<tr>
						<td></td>
						<td><h5>
								<p:calendar mode="popup" pattern="dd/MM/yyyy" size="32" showOn="both" icon="ui-icon-calendar"/><!-- icon="/images/iconCalendar.png" buttonImage="../images/iconCalendar.png"-->
							</h5>
						</td>
					</tr>
					<tr>
						<td></td>
						<td><h5>Base Horaire</h5>
						</td>
					</tr>
					<tr>
						<td></td>
						<td><h:inputText size="50" class="input-text"
								style="width:300px" />
						</td>
					</tr>
				</table>
				<br></br>
				<br></br>
				<p:separator />
				<table class="nostyle">
					<tr>
						<td>
							<h3>TÃ¢ches</h3> <p:spacer width="300" height="5"></p:spacer>
						</td>
						<td>
							<h5>TÃ¢ches automatiques Ã  horaires variables (plusieurs
								choix possibles) :</h5>
						</td>
					</tr>
					<tr>
						<td></td>
						<td><p:selectManyCheckbox layout="pageDirection"
								styleClass="nostyle">
								<f:selectItem itemLabel="Mise en Rayon de l'arrivage "
									itemValue="1" />
								<f:selectItem itemLabel="Mise en Rayon du reliquat"
									itemValue="2" />
								<f:selectItem itemLabel="Facing " itemValue="3" />
							</p:selectManyCheckbox></td>
					</tr>
					<tr>
						<td></td>
						<td><h5>TÃ¢ches automatiques Ã  horaires fixes :</h5>
						</td>
					</tr>
					<tr>
						<td></td>
						<td><p:selectManyCheckbox layout="pageDirection">
								<f:selectItem itemLabel="Reunion d'equipe" itemValue="1" />
							</p:selectManyCheckbox>
						</td>
					</tr>
				</table>
				<br></br>
				<br></br>
				<p:separator />
				<table class="nostyle">
					<tr>
						<td><h3>Familles de produits</h3> <p:spacer width="300"
								height="5"></p:spacer>
						</td>
						<td><h5>SÃ©lectionner la famille dans la liste :</h5>
						</td>
					</tr>
					<tr>
						<td></td>
						<td><p:selectOneMenu required="true" style="width:300px">
								<f:selectItem itemLabel="famille produit" itemValue="1" />
								<f:selectItem itemLabel="famille 2" itemValue="2" />
								<f:selectItem itemLabel="famille 3" itemValue="3" />
								<f:selectItem itemLabel="famille 4" itemValue="4" />
							</p:selectOneMenu>
							<br></br>
							<br></br>
						</td>
					</tr>
					<tr>
						<td></td>
						<td><p:commandButton value="Ajouter une famille"
								style="font-size: 0.9em" immediate="true"
								action="utilisateurList?faces-redirect=true" />
						</td>
					</tr>
				</table>
				<br></br>
				<br></br>
				<p:separator />
				<table class="nostyle">
					<tr>
						<td><h3>Ordonnancement des tÃ¢ches</h3> <p:spacer width="300"
								height="5"></p:spacer>
						</td>
						<td>
							<h5>Trier les tÃ¢ches par ordre de prioritÃ©s :</h5>
							<p:orderList value="#{tachesUsers.taches}" var="tache"
								itemValue="#{tache}" controlsLocation="right"><!-- controlsLocation="right" style="width:300px; height:300px"-->
								<p:column>  
						            #{tache}
						        </p:column>
							</p:orderList> 
							<p:commandButton value="Submit" update="displayCities"
								oncomplete="cityDialog.show()" style="margin-top:5px ; font-size: 0.9em"
								id="btnCitySubmit" /> 
							<p:dialog modal="true" showEffect="fade" hideEffect="fade" 
									Var="cityDialog" header="taches" widgetVar="usersTasksWuv"
									width="200" id="dlgCities">
									<p:dataList id="displayCities" value="#{tachesUsers.taches}"
										var="city">
										<h:outputText value="#{city}" />
									</p:dataList>
								</p:dialog>
							</td>
					</tr>
				
				</table>
				</p:panel>
				<br></br>
				<br></br>
				<p:separator />
				<br></br>
				<br></br>
				<p:commandButton value="Enregistrer" style="font-size: 0.9em"
					id="enregistrerUserId" widgetVar="saveUserWv" 
					action="#{utilisbeant.saveUser}" />
					
			</h:form>
		</f:view>
	</ui:define>
</ui:composition>